import { HowToImport } from './HowToImport.js'
import { BasicUsage } from './BasicUsage.js'
import { DictsUsage } from './DictsUsage.js'
import { CustomTableBtns } from './CustomTableBtns.js'
import { RenderUsage } from './RenderUsage.js'
import { Props } from './Props.js'
import { Methods } from './Methods.js'
import { Events } from './Events.js'
import { TableConfigDesc } from './TableConfigDesc.js'
import { SearchBarConfigDesc } from './SearchBarConfigDesc.js'
import { CreateAndUpdateConfigDesc } from './CreateAndUpdateConfigDesc.js'

import { NavBar } from '../Nav.js'

export const CrudDocs = {
  components: {
    HowToImport,
    BasicUsage,
    DictsUsage,
    CustomTableBtns,
    RenderUsage,
    Props,
    Methods,
    Events,
    TableConfigDesc,
    SearchBarConfigDesc,
    CreateAndUpdateConfigDesc,
    NavBar
  },
  template: `
    <div class="content">
      <how-to-import />
      <basic-usage />
      <dicts-usage />
      <custom-table-btns />
      <render-usage />
      <props />
      <methods />
      <events />
      <table-config-desc />
      <search-bar-config-desc />
      <create-and-update-config-desc />
      <nav-bar />
    </div>
  `,
  mounted() {
    document.querySelectorAll('pre code').forEach((el) => {
      window.hljs.highlightElement(el);
    });
  },
}